<template>
    <router-view v-slot="{ Component, route }">
        <transition
            :name="theme.pageAnimateMode"
            mode="out-in"
            :appear="true"
            @before-leave="app.setDisableMainXScroll(true)"
            @after-enter="app.setDisableMainXScroll(false)"
        >
            <keep-alive :exclude="routeStore.clearCacheRoutes">
                <component
                    :is="wrap(route.fullPath, Component)"
                    v-if="app.reloadFlag"
                    :key="route.fullPath"
                    :class="{ 'p-16px': showPadding }"
                    class="flex-grow bg-#f6f9f8 dark:bg-#101014 transition duration-300 ease-in-out h-full"
                />
            </keep-alive>
        </transition>
    </router-view>
</template>

<script setup lang="ts">
import { h } from 'vue'
import { useAppStore, useRouteStore, useThemeStore } from '@/store'

defineOptions({ name: 'GlobalContent' })

interface Props {
    /** 显示padding */
    showPadding?: boolean
}

withDefaults(defineProps<Props>(), {
    showPadding: true
})

const app = useAppStore()

const theme = useThemeStore()
const routeStore = useRouteStore()
const wrapperMap = new Map()
const wrap = (fullpath: string, component: any) => {
    if (!component) return
    if (wrapperMap.has(fullpath)) return h(wrapperMap.get(fullpath))
    let wrapper = {
        name: fullpath,
        render() {
            return h('div', null, component)
        }
    }
    wrapperMap.set(fullpath, wrapper)
    return h(wrapper)
}
</script>

<style scoped></style>
